

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script type="text/javascript" src="helpman_topicinit.js"></script>

<title>Web Style Templates [Enterprise Architect User Guide]</title>

<meta name="keywords" content="Enterprise Architect, Sparx Systems, UML, Web,Web Templates,Web Style Templates,HTML,HTML And CSS Style Editor,HTML Templates,HTML Style Templates">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<link type="text/css" href="default.css" rel="stylesheet" />
<style type="text/css">
  A, A:Visited
  {
    color: #00F;
  }

  A:Active, A:Hover
  {
    color: #F00;
  }

  OL
  {
    margin: 5px 0 5px 48px;
  }

  UL
  {
    margin-bottom: 3px;
    margin-top: 0;
  }

  #nsr
  {
    background-color: #D4DFFF;
  }

  #nsr A
  {
    text-decoration: none;
  }

  #mainbody
  {
    padding: 8px;
  }

  .p_BodyText
  {
    padding: 5px 0;
  }
</style>



<style type="text/css" media="screen">
  BODY
  {
    background-color: #FFFFFF;
  }

  #nsr
  {
    padding: 6px 6px 0 6px;
    border-bottom: none;
    vertical-align: top;
    z-index: 2;
    visibility: visible;
    left: 0;
    top: 0;
    position: absolute;
  }

  #mainbody
  {
    left: 0;
    top: 0;
    margin: 0;
    position: absolute;
    padding: 10px;
    overflow: auto;
    height: 100%;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-attachment: fixed;
  }
</style>

<style type="text/css" media="print">
  #nsr
  {
    visibility: none;
  }

  #mainbody
  {
    overflow: visible;
  }
</style>
<script type="text/javascript" language="JavaScript" src="nonscroll.js"></script>

</head>
<body scroll="no">

<div id="page">



        <div id="content">
          <div id="content-inner">
          



  
          <div id="nsr">
            <table border="0" cellspacing="0" cellpadding="4" width="100%">
              <tr valign="top">
                <td align="left">
  


                  <p class="p_Heading1"><span class="f_Heading1">Web Style Templates</span></p>



  
                </td>
                <td align="right">
                  <a href="introduction.htm" onmouseover="document.images.main.src='button_main_h.gif'" onmouseout="document.images.main.src='button_main.gif'">
                    <img name="main" src="button_main.gif" border=0 alt="Return to Introduction">
                  </a>&nbsp;
    
                  <a href="thegeneratehtmlreportdialo.htm" onmouseover="document.images.prev.src='button_prev_h.gif'" onmouseout="document.images.prev.src='button_prev.gif'">
                    <img name=prev src="button_prev.gif" border=0 alt="Previous page" />
                  </a>&nbsp;
    
    
    
                  <a href="html_template_fragments.htm" onmouseover="document.images.next.src='button_next_h.gif'" onmouseout="document.images.next.src='button_next.gif'">
                    <img name=next src="button_next.gif" border=0 alt="Next page" />
                  </a>
    
    
                </td>
              </tr>
            </table>
          </div>
          <div id="mainbody">
  


                <p class="p_BodyText"><span class="f_BodyText">The </span><span class="f_BodyText" style="font-style: italic;">HTML and CSS Style Editor</span><span class="f_BodyText"> enables you to edit the HTML associated with various sections of the HTML Report facility in Enterprise Architect. You would typically use this functionality to customize a report's look and feel for your company or client. The editor is derived from, and provides the facilities of, the common <a href="code_editors.htm">Code Editor</a>.</span></p>
<p class="p_BodyText"><span class="f_BodyText">To create or edit web style templates, follow the steps below:</span></p>
<ol style="text-indent: 0px; margin-left: 48px; list-style-position: outside;">
<li value=1><span class="f_NumberedList">In the </span><span class="f_UIControl">Resources </span><span class="f_NumberedList">window, expand the </span><span class="f_NumberedList" style="font-style: italic;">Templates</span><span class="f_NumberedList"> folder.</span></li>
<li value=2><span class="f_NumberedList">To edit an existing template, expand the </span><span class="f_NumberedList" style="font-style: italic;">Web Style Templates</span><span class="f_NumberedList"> folder and either double-click on the template name, or right-click and select the </span><span class="f_MenuKeyField">Modify HTML Style Template</span><span class="f_NumberedList"> option from the context menu. The </span><span class="f_UIControl">HTML and CSS Style Editor</span><span class="f_NumberedList"> displays. See below for further details.</span></li>
<li value=3><span class="f_NumberedList">To create a new template, right-click on the </span><span class="f_NumberedList" style="font-style: italic;">Web Style Templates</span><span class="f_NumberedList"> folder and select </span><span class="f_MenuKeyField">Create HTML Template</span><span class="f_NumberedList"> from the context menu. Enter a name for the new template when prompted to do so. The </span><span class="f_UIControl">HTML and CSS Style Editor</span><span class="f_NumberedList"> displays. See below for further details.</span></li>
</ol>
<div style="text-align: left; text-indent: -21px; padding: 0px 0px 0px 0px; margin: 5px 0px 0px 48px;"><table cellspacing="0" cellpadding="2" border="0" style="border: none; border-spacing:0px;">
<tr style="text-align:left;vertical-align:bottom;">
<td valign="bottom" width="952" bgcolor="#efeff7" style="width:952px; background-color:#efeff7;"><p class="p_TiporNote" style="border-top: none; border-right: none; border-left: none;"><span class="f_TiporNote">Note:</span></p>
</td>
</tr>
<tr style="text-align:left;">
<td width="952" bgcolor="#f7f7ff" style="width:952px; background-color:#f7f7ff;"><p class="p_TiporNoteText"><span class="f_TiporNoteText">To delete a template, right-click on it and select </span><span class="f_MenuKeyField">Delete HTML Template</span><span class="f_TiporNoteText"> from the context menu.</span></p>
</td>
</tr>
</table>
</div>
<p class="p_BodyText"><span class="f_BodyText">The </span><span class="f_UIControl">HTML and CSS Style Editor</span><span class="f_BodyText"> contains a list of all available HTML fragments for modification and customization. These fragments are defined in the <a href="html_template_fragments.htm">HTML Template Fragments</a> topic.</span></p>
<p class="p_BodyText"><span class="f_BodyText">Each fragment typically contains HTML plus one or more special tag names that Enterprise Architect replaces with information during generation. Currently you cannot alter the content within the tag names, but you can omit a complete tag by removing it, or alter its basic display properties in the surrounding HTML.</span></p>
<p class="p_BodyText"><span class="f_BodyText">Special tag names are delimited by </span><span class="f_BodyText" style="font-weight: bold;">#</span><span class="f_BodyText"> characters - e.g. </span><span class="f_BodyText" style="font-style: italic;">#NOTES#</span></p>
<p class="p_TextIndentedL2"><img src="htmleditor.png" width="747" height="448" border="0" alt="HTMLEditor"></p>
<ul style="text-indent: 0px; margin-left: 30px; list-style-position: outside;">
<li><span class="f_MenuKeyField">Get Default</span><span class="f_Bulletlist1"> retrieves the default Enterprise Architect template for the currently selected template item in the left hand list</span></li>
<li><span class="f_MenuKeyField">Save</span><span class="f_Bulletlist1"> saves your version of the template for this style only</span></li>
<li><span class="f_MenuKeyField">Delete</span><span class="f_Bulletlist1"> removes your modified version of the template, which causes Enterprise Architect to use the default template during report generation.</span></li>
</ul>
<p class="p_BodyText"><span class="f_BodyText">To select a template during generation, use the </span><span class="f_MenuKeyField">Style </span><span class="f_BodyText">drop-down arrow on the </span><span class="f_UIControl">Generate HTML Report</span><span class="f_BodyText"> dialog. Once a style is selected, Enterprise Architect applies that to the current report. Select &lt;default&gt; for the inbuilt style.</span></p>
<p class="p_TextIndentedL2"><img src="generatehtml-style.png" width="528" height="479" border="0" alt="GenerateHTML-Style"></p>
<div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 5px 0px 5px 13px;"><table cellspacing="0" cellpadding="2" border="0" style="border: none; border-spacing:0px;">
<tr style="text-align:left;vertical-align:bottom;">
<td valign="bottom" width="952" bgcolor="#efeff7" style="width:952px; background-color:#efeff7;"><p class="p_TiporNote" style="border-top: none; border-right: none; border-left: none;"><span class="f_TiporNote">Note:</span></p>
</td>
</tr>
<tr style="text-align:left;">
<td width="952" bgcolor="#f7f7ff" style="width:952px; background-color:#f7f7ff;"><p class="p_TiporNoteText"><span class="f_TiporNoteText">Each time Enterprise Architect generates the web report it overwrites these files, so you must back up your modified versions and copy them back in after every update.</span></p>
</td>
</tr>
</table>
</div>




            </div>
          </div>
        </div>



</div>


</body>
</html>
